<!DOCTYPE html>
<html data-dpr="1" lang="en" style="font-size: 54px;">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="../../../../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <link href="../../../../res/css/addressbookindex.css" rel="stylesheet">
    <title>通讯录</title>
    <link href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="../../../../res/css/addressbooktree.css" rel="stylesheet" type="text/css">
    <script src="../../../../res/js/login_common.js" charset="utf-8"></script>
    <style>
    html {
        color: #000;
        background: #fff;
        overflow-y: scroll;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }

    html * {
        outline: 0;
        -webkit-text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    html, body {
        font-family: sans-serif
    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, ::before, ::after {
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    input, select, textarea {
        font-size: 100%;
        border: none;
        outline: none;
        -webkit-appearance: none
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    fieldset, img {
        border: 0
    }

    abbr, acronym {
        border: 0;
        font-variant: normal
    }

    del {
        text-decoration: line-through
    }

    address, caption, cite, code, dfn, em, th, var {
        font-style: normal;
        font-weight: 500
    }

    ol, ul, dl, dd, dt, li {
        list-style: none
    }

    caption, th {
        text-align: left
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: 500
    }

    q:before, q:after {
        content: ''
    }

    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline
    }

    sup {
        top: -.5em
    }

    sub {
        bottom: -.25em
    }

    a:hover {
        text-decoration: none
    }

    a:link {
        text-decoration: none
    }

    a:visited {
        text-decoration: none
    }

    a:active {
        text-decoration: none
    }

    a:ins, a {
        text-decoration: none
    }

    button {
        border: none
    }

    .clearfix::before, .clearfix::after {
        content: '';
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both
    }</style>

</head>


<body style="font-size: 12px;">




<!-- 右侧|字母列表 -->
<ul id="letters">
    <li class="letter-item">A</li>
    <li class="letter-item">B</li>
    <li class="letter-item">C</li>
    <li class="letter-item">D</li>
    <li class="letter-item">E</li>
    <li class="letter-item">F</li>
    <li class="letter-item">G</li>
    <li class="letter-item">H</li>
    <li class="letter-item">I</li>
    <li class="letter-item">J</li>
    <li class="letter-item">K</li>
    <li class="letter-item">L</li>
    <li class="letter-item">M</li>
    <li class="letter-item">N</li>
    <li class="letter-item">O</li>
    <li class="letter-item">P</li>
    <li class="letter-item">Q</li>
    <li class="letter-item">R</li>
    <li class="letter-item">S</li>
    <li class="letter-item">T</li>
    <li class="letter-item">U</li>
    <li class="letter-item">V</li>
    <li class="letter-item">W</li>
    <li class="letter-item">X</li>
    <li class="letter-item">Y</li>
    <li class="letter-item">Z</li>
</ul>
<!-- 人名单列表 -->
<div class="list-container" id="top">
    <div id="namesList">
        <dl class="list">
            <dt id="a">A</dt>
            <dd>
                <table border="0" cellpadding="" cellspacing="">
                    <thead>
                    <tr>
                        <td>姓名</td>
                        <td>工号</td>
                        <td>部门</td>
                        <td>手机号</td>
                        <td>办公室电话</td>
                        <td>邮箱</td>
                        <td>上级</td>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>

                </table>

            </dd>
        </dl>
    </div>
</div>
<a class="ant-back-top" href="#namesList" style="display: block;">
    <div class="">
        <div class="ant-back-top-content">
            <div class="ant-back-top-icon"><span aria-label="vertical-align-top" class="anticon anticon-vertical-align-top"
                                                 role="img"><svg aria-hidden="true"
                                                                                                 class=""
                                                                                                 data-icon="vertical-align-top"
                                                                                                 fill="currentColor"
                                                                                                 focusable="false"
                                                                                                 height="1em"
                                                                                                 viewBox="64 64 896 896"
                                                                                                 width="1em"><path
                    d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"></path></svg></span>
            </div>
        </div>
    </div>
</a>


<script type="text/javascript">

    $(function () {
        $.ajax({
            url: getRootPath()+'OaPersonnelAction/addressBook',
            type: 'GET',//GET PSOT DELETE PUT
            contentType : "application/json;charset=utf-8",
            dataType:'json',
            headers:{token:token},
            success: function(data) {
                $("#namesList").html("");
                $.each(data.data,function (index,item) {
                    if(item.data.length>0){
                        $("#namesList").append('<dl class="list"><dt id="'+item.lowercase+'">'+item.uppercase+'</dt>' +
                            '<dd><table border="0" cellpadding="" cellspacing="">' +
                            '<thead><tr><td>姓名</td><td>部门</td><td>手机号</td><td>邮箱</td></tr></thead>' +
                            '<tbody id="txl'+item.uppercase+'"></tbody>');
                        $.each(item.data,function (indexs,items) {
                            $("#txl"+items.pid).append('<tr>\n' +
                                '                <td>'+items.name+'</td>\n' +
                                '                <td>'+items.departmentName+'</td>\n' +
                                '                <td>'+items.phone+'</td>\n' +
                                '                <td>'+items.email+'</td>\n' +
                                '            </tr>');
                        })
                    }
                })
            }
        });
    });

</script>

    <!--<script type="text/javascript">-->
        <!--$.ajax({-->
            <!--url: getRootPath()+'OaPersonnelAction/addressBook',-->
            <!--type: 'GET',-->
            <!--contentType : "application/json;charset=utf-8",-->
            <!--dataType:'json',-->
            <!--success: function(data) {-->
                <!--$("#namesList").html("");-->
                <!--$.each(data.data,function (index,item) {-->
                    <!--if(item.data.length>0){-->
                        <!--$("#namesList").append('<dl class="list"><dt id="'+item.lowercase+'">'+item.uppercase+'</dt><dd><table border="0" cellpadding="" cellspacing=""><thead><tr><td>姓名</td><td>部门</td><td>手机号</td><td>邮箱</td></tr></thead><tbody id="txl'+item.uppercase+'"></tbody>');-->
                        <!--console.info(item.data.length)-->
                        <!--$.each(item.data,function (indexs,items) {-->
                            <!--$("#txl"+items.pid).append('<tr>\n' +-->
                                <!--'                <td>'+items.name+'</td>\n' +-->
                                <!--'                <td>'+items.departmentName+'</td>\n' +-->
                                <!--'                <td>'+items.phone+'</td>\n' +-->
                                <!--'                <td>'+items.email+'</td>\n' +-->
                                <!--'            </tr>');-->
                        <!--})-->
                    <!--}-->
                <!--})-->
            <!--}-->
        <!--});-->
    <!--/*SampleJSONData.forEach(function (item, i) {-->
        <!--item.subs.forEach(function (_item, _i) {-->
            <!--_item.parentId = item.id-->
            <!--_item.parentName = item.title-->
        <!--})-->
    <!--})-->
    <!--let aaa = $('#justAnInputBox1').comboTree({-->
        <!--source: SampleJSONData,-->
        <!--isMultiple: false,-->
        <!--isFirstClassSelectable: false, //第一级是否可选-->
        <!--cascadeSelect: true,-->
        <!--selectedlength: 3 //最多可选-->
    <!--});*/-->
<!---->

<!--<script id="people-template" type="text/x-handlebars-template">
    {{#each directories}}
    <dl class="list">
        <dt id={{lowercase}}>{{uppercase}}</dt>
        <dd>
            <table border="0" cellspacing="" cellpadding="">
                <thead>
                <tr>
                    <td>姓名</td>
                    <td>工号</td>
                    <td>部门</td>
                    <td>手机号</td>
                    <td>办公室电话</td>
                    <td>邮箱</td>
                    <td>上级</td>
                </tr>
                </thead>
                <tbody>
                {{#each data}}
                <tr>
                    <td>{{name}}</td>
                    <td>{{jobNo}}</td>
                    <td>{{department}}</td>
                    <td>{{phone}}</td>
                    <td>{{telephone}}</td>
                    <td>{{email}}</td>
                    <td>{{superior}}</td>
                </tr>
                {{/each}}
                </tbody>

            </table>
            </table>
        </dd>
    </dl>
    {{/each}}
</script>-->
</body>
</html>


